<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8"> <!-- 字符集声明 -->

    <title>网页标题</title> <!-- 网页标题 -->

    <style>/* 内部CSS样式表及引入 */
    body {
        background-color: #f0f0f0; /* 背景颜色 */
        text-align: center; /* 文本对齐 */
    }

    p {
        font-family: Arial, sans-serif; /* 字体样式 */
        font-weight: bold; /* 字体粗细 */
    }
    </style>

    <link rel="stylesheet" href="styles1.css"> <!-- 外部css样式表引入 -->

    <script src="script.js"></script> <!-- 引用外部JS文件 -->

</head>

<body>
<p>下面是一个水平线</p> <!-- 段落标签 -->
<hr> <!-- 水平线 --><br>

这是<i>斜体字</i> <!-- 斜体字标签 --><br>
这是<b>粗体字</b> <!-- 粗体字标签 --><br>
这是<sup>上标</sup> <!-- 上标标签 --><br>
这是<sub>下标</sub> <!-- 下标标签 --><br>
这是
<del>修订标签del-删除线</del> <!-- 修订标签 - 删除 --><br>
这是
<ins>修订标签ins-下划线</ins> <!-- 修订标签 - 插入 --><br>
<hr>
这是pre
<pre>预格式化 标签
        自动换行和 空格</pre>

下面属性选择器--点击图片或文字跳转<br>
<a href="https://www.baidu.com">百度一下--去除下划线<img src="baidu.png" alt="示例图片" width="" height="">
    <!-- 图像标签 --></a> <!-- 超链接标签css-a标签中去除下划线 --><br>
无属性选择器--<a href="https://www.ahstu.edu.cn/">安徽科技学院</a> <!-- 超链接标签 --><br>
<ys>这是元素选择器-背景颜色</ys>
<p id="id1">这是id选择器-字体样式，大小，粗细</p>
<p class="lei">这是类选择器-文本对齐，装饰</p>
<h3 style="color:red">这是内联css样式表</h3>
<hr>

<p>下面是css框模型演示</p>
<pad> -內边距</pad>
<br>
<bor>-边框</bor>
<br>
<mar>-外边距</mar>
<hr>

<p>下面为JS演示</p>
<script>
    var s0 = "www.baidu.com";
    var s1 = s0.substring(4, 9);
    document.write(s1 + "<br>");//截取下标4~9
    var s2 = s0.slice(0, 2);
    document.write(s2 + "<br>");//截取下标0-2
    var s3 = s0.split(".");
    document.write(s3 + "<br>");//以.分割为数组
    var s4 = s0.indexOf("baidu");
    document.write(s4 + "<br>");//查找字符串b返回4
    var s5 = s0.indexOf("t");
    document.write(s5 + "<br>");//未查找到返回-1
</script>
<br>


<p1 id="idp1">id查找</p1>
<br>
<p2 class="cp2">类名查找</p2>
<br>
<p3>标签名查找</p3>
<br>
<button onclick="test1()">点此演示查找html元素</button>
<script>//-查找html元素（id，标签名，类名）
var p1 = document.getElementById("idp1");
var p2 = document.getElementsByClassName("cp2");
var p3 = document.getElementsByTagName("p3");

function test1() {
    alert(p1.innerHTML + "\n" + p2[0].innerHTML + "\n" + p3[0].innerHTML);
}

</script>
<br><br>


<p0 id="idp">这是js——改变html元素内容演示-未改变--id错误</p0>
<br>
<p0 id="idp0">这是js——改变html元素内容演示-未改变--id正确</p0>
<br>
<a href="https://www.baidu.com" id="a1">baidu-改变html属性--未改变</a><br>
<a href="https://www.baidu.com" id="a2">baidu-改变html属性--已改变</a><br>
<ys id="b1">css颜色改变前</ys>
<br>
<ys id="b2">css颜色改变后</ys>
<br>
<script>

    var pp = document.getElementById("idp0");//改变html元素内容
    var pp1 = pp.innerHTML;
    pp.innerHTML = "这是js———改变html元素内容演示-已改变";

    var href1 = document.getElementById("a2");//改变html元素属性
    href1.href = "https://www.ahstu.edu.cn/";

    var ys1 = document.getElementById("b2");//DOM css
    ys1.style.backgroundColor = "red";

    var date = new Date();
    document.write("这是创建动态html演示....时间：" + date.toLocaleString());//创建动态html内容
</script>
<br>

<p id="dom1">dom事件-未触发-pig是猪</p><!--外部js-->
<button onclick="change()">点此修改上述文本内容-触发dom事件</button>

<hr>

<p>下面为表单演示</p>
<form action="" method="post" name="exampleForm" enctype="multipart/form-data" novalidate>
    <!-- 表单标签 -->
    <input type="text" id="username" name="username" placeholder="请输入用户名" required autofocus autocomplete="on"><br>
    <!-- 输入标签 - 文本 -->
    <input type="password" placeholder="请输入密码" required><br> <!-- 输入标签 - 密码 -->
    <input type="radio" name="1gender" value="male" required> Male <!-- 输入标签 - 单选框 -->
    <input type="radio" name="1gender" value="female" required> Female<br>
    <input type="checkbox" name="agree" required> 我同意协议 <!-- 输入标签 - 复选框 --><br>
    <input type="submit" value="提交"><br> <!-- 输入标签 - 提交按钮 -->
    <input type="button" value="点此激活" onclick="welcome()"></input> <!-- 按钮标签 -->
    <script>
        function welcome() {
            alert("hello world!");
        }
    </script>
</form>


</body>

</html>
